<template>
    <div class="statistics-detailed">
        <div class="head-box">
            <div class="title">{{ title }} 统计</div>
            <!-- <div class="icon"><i class="el-icon-download"></i></div> -->
        </div>
        <div class="select-custom-box">
            <selectCustom
                ref="selectCustom1"
                :option_list="option_list1"
                :select_id="searchform.groupid"
                :top_num="top_num_screen"
                :w_num_screen="w_num_screen"
                :left_num_screen="left_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '1')"
                @openSelect="openSelect('1')"
            ></selectCustom>
            <selectCustom
                ref="selectCustom2"
                :option_list="option_list2"
                :select_id="searchform.group"
                :top_num="top_num_screen"
                :w_num_screen="w_num_screen"
                :left_num_screen="left_num_screen"
                @cheOptionvalue="cheOptionvalue($event, '2')"
                @openSelect="openSelect('2')"
            ></selectCustom>
        </div>
        <div class="list-head">
            <div class="title">日期</div>
            <div class="title">卖量</div>
            <div class="title">买量</div>
            <div class="title">卖出</div>
            <div class="title">买进</div>
            <div class="title">利润</div>
        </div>
        <div
            class="list-box comm-list"
            v-if="data_list.length > 0"
            v-infinite-scroll="loadFun"
        >
            <div
                class="list-row"
                v-for="(item, index) in data_list"
                :key="index"
                :class="avitve_i == item.timestr ? 'acitve' : ''"
                @click="selectlistFun(item)"
            >
                <div class="content">{{ item.timestr }}</div>
                <div class="content">{{ item.amount_diff_re }}</div>
                <div class="content">{{ item.amount_diff_re }}</div>
                <div class="content">{{ item.amount_diff_re }}</div>
                <div class="content">{{ item.amount_diff_re }}</div>
                <div class="content">{{ item.amount_diff_re }}</div>
                <div class="icon">
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
        </div>
        <empty v-else />
        <!-- 时间选择器 -->
        <dateWin
            ref="dateWin"
            @selectDate="selectDate"
            @closeDate="closeDate"
        ></dateWin>
    </div>
</template>

<script>
import selectCustom from "@/components/comm/selectCustom.vue";
import config from "@/js/conf/Config.js";
import dateWin from "@/components/comm/DateWin.vue";
import empty from "@/components/comm/empty.vue";
import util from "@/js/util/Util.js";

export default {
    props: [],
    components: { selectCustom, dateWin, empty },
    computed: {},
    data() {
        return {
            title: "",
            avitve_i: "",
            top_num_screen: 80,
            left_num_screen: 640,
            w_num_screen: 450,
            searchform: {
                groupid: "all",
                group: "0",
                page: 1,
                customerid: "",
                stime: "",
                dtime: "",
            },
            option_list1: [
                {
                    title: "全部团队",
                    groupid: "all",
                    id: "all",
                },
            ],
            option_list2: [
                {
                    title: "全部日期",
                    id: "0",
                },
            ],
            is_soll: true,
            data_list: [],
        };
    },
    created() {},
    mounted() {},
    methods: {
        initData(data) {
            this.title = data.name;
            this.emptyFun();
            this.searchform.customerid = data.customerid;
            this.getDetailedFun();
        },
        setTimeFun() {
            this.$refs.dateWin.show("show");
        },
        selectDate(st, et) {
            if (util.getDaysBetween(st, et) > 45) {
                if (this.searchform.stime == "") {
                    this.searchform.group = "0";
                }
                this.$msg({ title: "自定义时间查询 时间不得大于45天" });
                return;
            }
            this.emptyFun();
            this.searchform.stime = st;
            this.searchform.dtime = et;
            this.getDetailedFun();
        },
        closeDate() {
            if (this.searchform.stime == "") {
                this.searchform.group = "0";
            }
        },
        cheOptionvalue(item, type) {
            if (type == 1) {
                this.searchform.groupid = item.id;
            } else if (type == 2) {
                this.searchform.group = item.id;
            }
            if (type == 2 && item.id == 5) {
                this.setTimeFun();
            } else {
                this.emptyFun();
                this.getDetailedFun();
            }
        },
        openSelect(type) {
            for (let i = 1; i < 3; i++) {
                if (i != type) {
                    this.$refs[`selectCustom${i}`].is_select_show = false;
                }
            }
        },
        selectlistFun(item) {
            this.avitve_i = item.timestr;
            let obj = JSON.parse(
                JSON.stringify(Object.assign(this.searchform, item))
            );
            this.$emit("getDetailsFun", obj);
        },
        loadFun() {
            if (this.is_soll) return;
            if (this.searchform.group == 2 || this.searchform.group == 3)
                return;
            this.searchform.page++;
            this.getDetailedFun();
        },
        async getDetailedFun() {
            this.is_soll = true;
            let url = config.ASSQ_SELL_COUNT;
            let param = JSON.parse(JSON.stringify(this.searchform));
            let res = await this.$api({ url: url, data: param });
            if (!res) return;
            if (this.option_list1.length == 1) {
                this.option_list1 = this.option_list1.concat(res.data.group_ls);
                this.option_list1.map((v) => {
                    v.id = v.groupid;
                });
            }
            if (this.option_list2.length == 1) {
                this.option_list2 = this.option_list2.concat(res.data.group);
            }

            if (res.data.count_ls) {
                this.data_list = this.data_list.concat(res.data.count_ls);
                if (param.page == 1) {
                    this.avitve_i = this.data_list[0].timestr;
                    let obj = Object.assign(param, this.data_list[0]);
                    this.$emit("getDetailsFun", obj);
                }
                setTimeout(() => {
                    this.is_soll = false;
                }, 300);
            } else {
                this.is_soll = true;
                this.$msg({ title: "暂无数据" });
            }
        },
        emptyFun() {
            this.data_list = [];
            this.searchform.page = 1;
            this.is_soll = false;
        },
    },
};
</script>

<style lang="scss" scoped >
.statistics-detailed {
    width: 450px;
    border-right: 1px solid #ededed;
    height: 100vh;
    .select-custom-box {
        padding: 7.5px 0;
        background: #f3f3f2;
        display: flex;
        justify-content: space-around;
    }
    .head-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        height: 39px;
        padding: 0 10px;
        border-bottom: 1px solid #ededed;
        i {
            font-size: 22px;
            cursor: pointer;
            vertical-align: middle;
        }
    }
    .list-head {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        padding-right: 15px;
        height: 40px;
        background: #f3f3f2;
        // border-top: 1px solid #e4e7ed;
        .title {
            flex: 1;
            text-align: center;
            &:first-child {
                text-align: left;
            }
            // &:last-child {
            //     text-align: right;
            // }
        }
    }
    .list-box {
        height: calc(100% - 135px);

        .list-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            padding-right: 2px;
            // height: 40px;
            border-bottom: 1px solid #e4e7ed;
            cursor: pointer;
            &:hover {
                background: #fdf6f6;
            }
            &.acitve {
                background: #3e8af9;
                color: #fff;
            }
            .content {
                width: 75px;
                word-wrap: break-word;
                word-break: normal;
                text-align: center;
                &:first-child {
                    text-align: left;
                }
                &:last-child {
                    text-align: right;
                }
            }
        }
    }
}
</style>
